<template>
  <div class="shoplist">
      <div class="contains">
    <el-table :data="tableData5" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称：">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="店铺地址：">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品介绍：">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID：">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="联系电话：">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="评分：">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="销售量：">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
              <el-form-item label="分类：">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
       <el-table-column label="操作" prop="operate">
           <div class="button-list">
            <el-button type="primary" round>编辑</el-button>
             <el-button type="warning" round>添加食品</el-button>
             <el-button type="danger" round>删除</el-button>
           </div>
       </el-table-column>
    </el-table>
      </div>
  </div>
</template>
<script>
export default {
    data(){
        return {
            tableData5: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
        }
    }
}
</script>
<style scoped lang='stylus'>
 .demo-table-expand 
    font-size 0
  
  .demo-table-expand label 
    width 90px
    color #99a9bf
  
  .demo-table-expand .el-form-item 
    margin-right 0
    margin-bottom 0
    width 50%
.contains
   padding 20px
   .el-table
       min-width 725px
       border 1px solid #dfe6ec
.el-table__header-wrapper
    background-color #f5f5f5
.button-list
    width 200px
    display flex
    .el-button
      max-width 60px
      height 30px
      padding 5px
      font-size 12px
</style>